<template>
  <div class="campus-binhai">
    <header class="header">
      <h1>学生信息查询</h1>
    </header>
    <main class="main">
      <form @submit.prevent="onSubmit">
        <label for="studentId">学号:</label>
        <input type="text" id="studentId" v-model="studentId" placeholder="请输入学号" required />
        <button type="submit">查询</button>
      </form>
      <div v-if="studentInfo" class="student-info">
        <h2>学生信息</h2>
        <p><strong>姓名:</strong> {{ studentInfo.name }}</p>
        <p><strong>年龄:</strong> {{ studentInfo.age }}</p>
        <p><strong>专业:</strong> {{ studentInfo.major }}</p>
      </div>
      <div v-else-if="searched && !studentInfo" class="no-result">
        <p>未找到该学生信息</p>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentId: '',
      studentInfo: null,
      searched: false,
    };
  },
  methods: {
    onSubmit() {
      // 模拟学生信息查询
      const students = [
        { id: '1001', name: '李小明', age: 20, major: '计算机科学' },
        { id: '1002', name: '王小红', age: 21, major: '电子信息工程' },
     
      ];

      const student = students.find(student => String(student.id) === this.studentId);
      if (student) {
        this.studentInfo = student;
      } else {
        this.studentInfo = null;
      }
      this.searched = true;
    },
  },
};
</script>

<style scoped>
.campus-binhai {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
}

label {
  margin-top: 16px;
  font-weight: bold;
}

input {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-top: 16px;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.student-info {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  text-align: left;
}

.no-result {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  color: red;
}
</style>